<template>
  <div style="padding: 0 50px">
    <div class="back-box">
      <div>
        <el-tag v-if="isShowResult" type="primary" effect="dark" size="large">已报名</el-tag>
      </div>
      <el-button type="primary" @click="goBack(0)">返回</el-button>
    </div>
    <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="200">
      <ContentWrap>
        <div class="title-box">
          <span class="title">一、基本信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关联公告:">
              <el-tooltip effect="dark" :content="formData?.announcementName">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.announcementName }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公告编号:">
              <el-tooltip effect="dark" :content="formData?.announcementCode">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.announcementCode }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="场次名称:">
              <el-tooltip effect="dark" :content="formData?.sessionName">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.sessionName }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场次编号:">
              <el-tooltip effect="dark" :content="formData?.sessionCode">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.sessionCode }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易总量(吨):">
              <span>{{ formData.tradingGrossAmount }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金(元):">
              <span>{{ formData.securityDeposit }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交货周期:">
              <el-tooltip effect="dark" :content="formData?.deliveryCycle">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.deliveryCycle }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货地:">
              <el-tooltip effect="dark" :content="formData?.deliveryPlace">
                <div class="self-ellipsis self-max-width-400">
                  {{ formData?.deliveryPlace }}
                </div>
              </el-tooltip>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易日期:">
              <span>{{ formData.deliveryDate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交易时间:">
              <span v-if="formData.startTime && formData.endTime">{{
                `${formData.startTime} -
                ${formData.endTime}`
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="倒计时(秒):">
              <span>{{ formData.countdown }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公示时间:">
              <span>{{ formatTime(formData.publicityTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易方式:">
              <span>{{
                getDictLabel(DICT_TYPE.BID_TRADING_WAY, formData.tradingWay?.toString())
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </ContentWrap>
      <ContentWrap>
        <div class="title-box">
          <span class="title">二、标段信息</span>
        </div>
        <el-table
          border
          stripe
          v-loading="loading"
          :data="formData.sectionMessageRespVOList || []"
          :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
        >
          <el-table-column label="标段号" align="center" prop="markCode" min-width="200" />
          <el-table-column
            :formatter="dateFormatter"
            label="竞拍时间（开始）"
            align="center"
            prop="startTime"
            width="200"
          />
          <el-table-column
            :formatter="dateFormatter"
            label="竞拍时间（结束）"
            align="center"
            prop="endTime"
            width="200"
          />
          <el-table-column label="产品名称" align="center" prop="coalName" min-width="100">
          </el-table-column>
          <el-table-column label="交易量(吨)" align="center" prop="tradingAmount" min-width="150" />
          <el-table-column
            :label="`${formData.tradingWay === 3 ? '挂牌' : '起拍'}价格(元/吨)`"
            align="center"
            prop="startingPrice"
            min-width="150"
          />
          <el-table-column label="基本指标" min-width="250">
            <template #default="{ row }">
              <el-row>
                <el-col :span="12">发热量：</el-col>
                <el-col :span="12">{{ row.calorificValue }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">灰分(Ad%)：</el-col>
                <el-col :span="12">{{ row.ashContent }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">硫分(St,d%)：</el-col>
                <el-col :span="12">{{ row.sulfurContent }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">水分(Mt%)：</el-col>
                <el-col :span="12">{{ row.hydration }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">挥发分(Vdaf%)：</el-col>
                <el-col :span="12">{{ row.volatileMatter }}</el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column v-if="!isShowResult" label="竞拍结果" min-width="250">
            <template #default="{ row }">
              <el-row>
                <el-col :span="12">状态：</el-col>
                <el-col :span="12">
                  {{ getDictLabel(DICT_TYPE.BID_STATUS_TYPE, row?.status?.toString()) }}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">成交量：</el-col>
                <el-col :span="12">{{ row.bidAmount || 0 }}吨</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">成交价格：</el-col>
                <el-col :span="12">{{ row.bidPrice || 0 }}元/吨</el-col>
              </el-row>
              <el-row>
                <el-col :span="12">成交客户：</el-col>
                <el-col :span="12">{{ row.customerName }}</el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>
      <ContentWrap>
        <div class="title-box">
          <span class="title">三、附加说明</span>
        </div>
        <div class="editor-box" v-html="formData.remark"> </div>
      </ContentWrap>
      <ContentWrap v-if="!isShowResult">
        <div class="title-box">
          <span class="title">四、指定客户</span>
        </div>
        <div class="spec-user">
          <span>指定客户:</span>
          <span v-if="formData.appointClientList?.length">
            <el-tag type="info" v-for="item in formData.appointClientList || []" :key="item.id">{{
              item.companyName
            }}</el-tag>
          </span>
        </div>
        <div class="text-red-500 mt-20px">* 不选择默认通知全部客户</div>
      </ContentWrap>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { formatTime } from '@/utils'
import * as Utils from '@/utils/dict'
import * as bidding from '@/api/bidding'
import { dateFormatter } from '@/utils/formatTime'
const { DICT_TYPE, getDictLabel } = reactive(Utils)
const formRef = ref()
const loading = ref(false)
const formLoading = ref(false)
const emit = defineEmits(['subPage'])
const clientList: Record<string, any> = ref([])
const eventNameList: Record<string, any> = ref([])
const formData: Record<string, any> = ref({})

const props = defineProps({
  id: Number
})

const router = useRouter()

const isShowResult = computed(() =>
  router.currentRoute?.value?.path?.includes('/bidManage/bidsDetail')
)

const goBack = (value: string) => {
  emit('subPage', value)
}

const resetFn = () => {
  formData.value = {}
  formRef.value?.resetFields()
}

const getByEventName = async () => {
  eventNameList.value = await bidding.getByEventName()
}

const getCustomList = async () => {
  clientList.value = await bidding.getAllList()
}

const init = async () => {
  loading.value = true
  try {
    resetFn()
    await getByEventName()
    await getCustomList()
    const data = await bidding.getSessionById({ id: props.id })
    formData.value = data
    formData.value.appointClientList = clientList.value.filter((e: Record<string, any>) =>
      formData.value.appointClientList?.includes(e.id)
    )
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  init()
})
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .title {
    font-weight: bold;
  }
}

.editor-box {
  padding: 10px;
  overflow-wrap: break-word;
  border: 1px solid #e4e4e7;
}

.spec-user {
  display: flex;
  align-items: center;
  > .el-tag {
    margin-left: 12px;
  }
}

.back-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
